<script setup>
import { reactive, ref } from 'vue'
let emit = defineEmits(['emitSortOptionVal','emitSearchInputVal'])
const props = defineProps({
    titleWidth:Number,
    fontFlag:{
        type: Boolean,
        default: false
    },
    title: String,
    isShowLine: {
        type: Boolean,
        default: true
    },
    botText:{
        type:String
    },
    isPrize:Boolean,
    sortOptions:Array,
    isDark:Boolean,
    isEn:{    //是否英文
        type:String,
        default:'zhCN'
    },
    placeholder:String
})
// 获取图片路径资源
const getImageUrl = (name) => {
    return new URL(`../../assets/img/home/${name}`, import.meta.url).href
}
const input2 = ref('')
const value = ref('PRICE_HIGHEST')
// 排序下拉框改变事件
const changeOptions = (val)=>{
    console.log(val,'val下拉')
    emit('emitSortOptionVal',val)
}
// 搜索事件
const searchFunc = ()=>{
    emit('emitSearchInputVal',input2.value)
}
// 获取图片路径资源
const getImageUrlEarn = (name) => {
    return new URL(`../../assets/img/earn/${name}`, import.meta.url).href
}

</script>
<template>
    <div class="modelTop padtop40">
        <div class="nowEggPng" :style="{width: props.titleWidth ? props.titleWidth+'px' : '367px'}">
            <div class="nowEggPngDiv top16">
                <div class="jiantoubox">
                    <div :style="{ color: isDark ? '#fff' : '#282828' }"> {{title}}</div>
                    <img class="jiantou" :src="isDark ? getImageUrl('whitejiantou.png') : getImageUrl('blackjiantou.png')" alt="">
                </div>
                
                <!-- <div :class="fontFlag ?  'realTime font16' : 'realTime'" style="font-weight: bold;">
                    {{botText?.toUpperCase()}}
                </div> -->
            </div>
            <img :src="getImageUrl('title.png')" alt="">
        </div>
        <!-- <div :class="isPrize? 'nowEggPng nowEggPngP' : 'nowEggPng'"  v-show="isEn === 'zhCN'">
            <div :class="isDark? 'nowEggPngDiv  nowEggPngDivP' : 'nowEggPngDiv'">
                <div :style="{color: isDark?'#fff':'#282828'}">{{title}}</div>
                <div class="realTime" style="font-weight: bold;">
                    REAL TIME TOYS
                </div>
            </div>
            <img :src="isDark ? getImageUrl('nowEgg.png') : getImageUrl('title2.png')" alt="">

        </div>
        <div class="nwoEggImgW95" v-show="isEn === 'en'">
            <div :class="isDark ? 'nowEggPngDiv top16' : 'nowEggPngDiv top7'">
                <div :style="{ color: isDark ? '#fff' : '#282828' }"> {{title}}</div> -->
                <!-- <div class="realTime" style="font-weight: bold;">
                    REAL TIME TOYS
                </div> -->
            <!-- </div>
            <img  :src="getImageUrlEarn('Mask.png')" alt="">

        </div> -->
        <div class="searchBoxBig">
            <el-select v-model="value" class="m-2 selectClass"  @change="changeOptions" placeholder="A_Z">
                <el-option v-for="item in sortOptions" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
            <div class="searchBox">
                <el-input @keyup.enter.native="searchFunc" v-model="input2" :placeholder="placeholder"/>
                <!-- <input type="text" placeholder="搜索你想要的..."> -->
                <div class="imgBox" @click="searchFunc">
                    <img src="../../assets/img/home/search.png" alt="">

                </div>
            </div>
        </div>

    </div>
</template>
<style scoped>
.nowEggPng{
    position: relative;
    /* width: 356px; */
    display: flex;
    width: 80%;
    flex-direction: column;
    font-size: 44px;

}
.top16{
    top: 14px !important;
}
.nowEggPngDivP{
    left:81px !important;
    top: 23px !important;
    
}
.nowEggPngDiv{
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 76px;
    font-size: 40px;
    top: 16px;
}
.font16{
    font-size: 16px !important;
}
.nwoEggImgW95{
    position: relative;
    width: 550px;
    display: flex;
    flex-direction: column;
    font-size: 44px;
}
.nwoEggImgW95 img{
    width: 95px !important;
    height: 100px;
}
.nowEggPngP{
    width: 392px !important;
    margin: 0 !important;
}
.nowEggPng img{
    width: 100%;
}
.searchBoxBig{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.imgBox{
    width: 60px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(143.13deg, #27D698 23.41%, #5BCE3A 85.53%);
    cursor: pointer;
}
.selectClass >>> .el-select__placeholder{
    color: #fff !important;
}
.modelTop {
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin: 0 180px;
    padding-top: 45px;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100% - 360px);
}

.padtop40 {
    padding-top: 40px;
}

.modelTopL {
    display: flex;
    align-items: center;
}

.modelTopL img {
    width: 356px;
}

.selectModel {
    display: flex;
    align-items: center;
    width: 510px;
    justify-content: space-between;
}
.realTime{
    font-size: 18px;
    padding-left: 2px;
}
.searchBox {
    display: flex;
    /* border-radius: 8px; */
    /* padding: 5px 15px; */
    width: 342px;
    justify-content: space-between;
    height: 54px;
    background: #282828;
}

.searchBox>>>.el-input__wrapper {
    background: transparent !important;
    /* border: 1px solid #ffffff45; */
    box-shadow: unset !important;
    /* color: #fff !important; */
    /* border-radius: 3px; */
}

:deep(.el-input__inner::placeholder) {
    color: #fff
}

.searchBox>>>.el-input__inner {
    color: #fff;

}

.searchBox input {
    width: 81%;
    background: transparent;
    border: unset;
    color: #fff;
}

.searchBox img {
    width: 34px;
}


.modelTopLLine {
    background: #fff;
    width: 4px;
    height: 34px;
    border-radius: 2px;
    margin-right: 15px;
}

.modelTopRText {
    font-size: 32px;
}

.selectClass {
    width: 335px !important;
    height: 54px !important;
    padding-right: 24px;
}
.selectClass >>> .el-select__wrapper{
    height: 100%;
    background: #282828;
    box-shadow: 0 0 0 1px #282828;
    border-radius: 0px;

}
.nowEggPng img {
    width: 97px;
}
.jiantoubox{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.jiantou{
    margin-left: 15px;
    width: 100px !important;
}
@media screen and (max-width:1600px) {
.modelTop{
    flex-wrap: unset !important;
    width: 93% !important;
    /* margin-left: 55px; */
    min-width: unset;
}
.selectClass{
    width: 200px !important;
}
.searchBox{
    width: 300px !important;
}

}

</style>